<template>
  <div>
    <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
      <nut-swiper-item v-for="item in list" :key="item">
        <img :src="item" alt="" />
      </nut-swiper-item>
    </nut-swiper>
  </div>
</template>
  
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { goodsForRec } from '../../../../api/index'
export default {
  setup() {
    const state = reactive({
      page: 2,
      list: [],
      id: '',
    });
    onMounted(() => {
      const router = useRouter();
      if (router.params.id) {
        state.id = router.params.id
      }
      //console.log(state.id)
      getProductDetail(router.params.id)

    });
    const getProductDetail = (id) => {
      goodsForRec(id).then(res => {
        if (res.resultCode) {
          state.list = res.data.goodsCarouselList
        }
      })
    };
    return { ...toRefs(state), getProductDetail };
  }
};
</script>
<style lang="scss" >
.nut-swiper-item {
  line-height: 400px;

  img {
    width: 100%;
    height: 100%;
  }
}

// .banner-width {
//   margin-left: 5%;
//   width: 90%;
// }
</style>